<template>
  <div class="dx-custom-Wrap">
    <div class="common-custom-head">
      <span>{{name}}</span>
    </div>
    <div class="common-custom-content">
      <slot name="content">
<!--        template v-slot:content-->
      </slot>
    </div>
  </div>
</template>
<script>
    export default {
        props: ['name'],
        data () {
            return {

            }
        },
        methods: {
        },
        mounted() {
        }
    }
</script>
<style lang="stylus">
  .dx-custom-Wrap{
    height: 100%;
    position: relative;
    background-image: url("../../assets/img/bg/left.png");
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 100% 100%;
    &::before{
      content: '';
      display: block;
      position: absolute;
      width: 100%; height: 100%;
      left: 0; top: 0;

      z-index: -1;
    }
    .common-custom-head{
      height: 60px;
      //background-image: url("../../assets/img/HuaiNanImg/dx_border.png")
      background-repeat: no-repeat;
      background-position: 0px 0px;
      background-size: 100% 100%;
      padding-left: 20px;
      padding-top: 20px;
      line-height: 50px;
      span{
        color: #e2ebf1;
        font-size: 50px;
      }
    }
    .common-custom-content{
      height: calc(100% - 100px);
    }
  }
  @media screen and (max-width: 1920px) {
      .common-custom-head{
          height: 40px!important;
          padding-top: 10px!important;
          line-height: 40px!important;
          span{
              font-size: 20px!important;
          }
      }
      .common-custom-content{
          height: calc(100% - 60px)!important;
      }

  }
</style>
